<script setup lang="ts">
const path = ref();

const slectPath = () => {
  path.value = "";
  path.click();
};

const openPath = () => {
  const files = event.target.files;
  this.pathArr = Array.prototype.map.call(files, item => {
    return item.path;
  });
};

const showPath = () => {
  return this.pathArr.join(",");
};

const uploadClick = () => {
  if (this.pathArr.length == 0) {
    this.$message.error("Please select file directory.");
    return;
  }
  this.$emit("upload", this.pathArr);
  this.pathArr = [];
};
</script>

<template>
  <div class="upload-container">
    <el-input
      readonly
      size="mini"
      v-model="showPath"
      :placeholder="placeholder"
      :disabled="disabled"
    >
      <el-button
        size="mini"
        slot="append"
        icon="el-icon-folder-opened"
        @click.native="slectPath"
        :disabled="disabled"
      />
    </el-input>
    <el-button
      size="mini"
      class="submitbtn"
      :disabled="disabled"
      @click="uploadClick"
      >{{ btnName }}</el-button
    >

    <input
      type="file"
      ref="path"
      :multiple="multiple"
      @change="openPath"
      style="
        filter: alpha(oonOpenCSVFilepacity=0);
        opacity: 0;
        width: 0px;
        height: 0px;
      "
    />
  </div>
</template>

<style lang="scss" scoped>
.upload-container {
  display: flex;
  align-items: center;
}
.upload-container .el-input {
  flex: 1;
}
.upload-container .submitbtn {
  margin-left: 10px;
}
</style>
